<template>
	<view>
		<view class="hhh" style="">
			<view class="immediate-wrap-close" @click="closeSuer">
				<image src="@/static/bj/icon_cha.png" mode=""></image>
			</view>
			<view class="immediate-wrap-head disCenter">
				<image src="@/static/bj/icon_ppg.png" mode=""></image>
				{{sure2Data.title}}！已为您成功匹配贷款服务机构！
			</view>
		</view>
		<view class="" style="height: 120rpx;">
		</view>
		<view class="immediate-wrap" style="background: linear-gradient( 179deg, #1977FB 0%, #F3F4F5 30%);">
			<view class="">
				<view class="immediate-wrap-card dis">
					<view class="immediate-wrap-card-ntop dis">
						<view class="immediate-wrap-card-ntop-left">
							<view class="immediate-wrap-card-ntop-left-l">贷款服务机构</view>
							<view class="immediate-wrap-card-ntop-left-r">综合下款率高，放款快</view>
						</view>
						<view class="immediate-wrap-card-top dis">
							<!-- <image src="/static/logo.png" mode=""></image> -->
							<image :src="sure2Data.logo" mode=""></image>
							{{sure2Data.productName}}
						</view>
					</view>

					<view class="immediate-wrap-card-center dis" v-if="sure2Data.page=='sure1'">
						<view>公司名称</view>
						<view>{{sure2Data.companyName}}</view>

					</view>
					<view class="immediate-wrap-card-center dis" v-if="sure2Data.page=='sure2'">
						<view>助贷平台</view>
						<view>{{sure2Data.companyName}}</view>

					</view>
					<view class="immediate-wrap-card-center1 dis" v-if="sure2Data.page=='half'">

						<view class="tag">预审通过</view>
						<view class="tag">额度高</view>
						<!-- <view class="tag">身边比啊</view> -->

					</view>
					<view class="immediate-wrap-card-bot dis">
						<view class="immediate-wrap-card-bot-msg">
							<view class="immediate-wrap-card-bot-msg-tit">最长可分</view>
							<view class="disCenter">
								<text class="immediate-wrap-card-bot-msg-titcolor1">{{sure2Data.longLimit}}</text>
								<text style="margin-left: 4rpx;">期</text>
							</view>
						</view>
						<view class="immediate-wrap-card-bot-msg">
							<view class="immediate-wrap-card-bot-msg-tit">最高额度</view>
							<view class="immediate-wrap-card-bot-msg-titcolor">{{sure2Data.maxLimit}}</view>
						</view>
						<view class="immediate-wrap-card-bot-msg">
							<view class="immediate-wrap-card-bot-msg-tit">年化最低</view>
							<view class="disCenter">
								<text class="immediate-wrap-card-bot-msg-titcolor1">{{sure2Data.minRate}}</text>
								<text style="margin-left: 4rpx;">%</text>

							</view>
						</view>

					</view>

				</view>
				<view class="des">
					<text class="des-ts">温馨提示</text>
					<text> 该产品需电话审核放款，申请后请注意接听，一切境外电话均为诈骗。额度以及利率以最终审核结果为准。
					</text>

				</view>
				<view class="pplc" v-if="sure2Data.page!='half'">
					<image src="@/static/bj/icon_pplc.png" mode=""></image>
				</view>
				<view class="xyPup" v-if="sure2Data.page=='half'">
					<xyswiper :protocolList="sure2Data.protocolList" ></xyswiper>
				</view>
				<view class="h5-wrap" v-else>
					<web-view :frameBorder="0" :fullscreen='false' style=" border:none;width: 100%;height: 500rpx;"
						:src="sure2Data.protocolUrl"></web-view>
				</view>
				
				<view class="" style="height: 120rpx;">
				</view>
				<!-- <view class="" @click="hhh">
					点我
				</view> -->

				<view class="">
					<view class="submit" @click="$noMultipleClicks(hhh)">立即申请</view>
				</view>

			</view>
		</view>
	</view>

</template>

<script>
	import xyswiper from '@/components/xySwiper.vue'
	export default {
		props: {
			sure2Data: {},
			type: Number,
			productData: {}
		},
		components:{
			xyswiper
		},
		data() {
			return {
				noClick: true,
				backAffirmList: [{
						status: 1,
						url: '@/static/index/icon_sfz.png',
						msg: '身份信息'
					},
					{
						status: 1,
						url: '@/static/index/icon_lzxx.png',
						msg: '留资信息'
					},
					{
						status: 1,
						url: '@/static/index/icon_xycs.png',
						msg: '信用初审'
					}
				],
				isShow: false,
			}
		},
		watch: {
			productData(val) {
				this.productData = val
			},
			type(val) {
				this.type = val
			},
			show(val) {
				this.isShow = val
			}
		},
		methods: {
			hhh() {
				this.$emit('surePageClick', this.type)

			},
			closeSuer() {

				this.$emit('closeSuer')
			},
			// 禁止穿透
			bindTouchmove() {},

			show() {
				this.isShow = true;
			},
			sureCLick() {

			}
		}
	}
</script>

<style lang="scss" scoped>
	.xyPup {
	    width: 100%;
	    background: #fff;
	    border-radius: 30rpx;
	    height: 500rpx;
	    overflow-y: scroll;
	    margin-top: 20rpx;
	}
	
	.disCenter {
		display: flex;
		align-items: center;
	}

	.hhh {
		background: #1D7AFB;
		// height: 150rpx;
		z-index: 100;
		height: 120rpx;
		position: fixed;
		top: 0;
		border-radius: 24rpx 24rpx 0 0;

		// left: 1%;
		width: 100%;
	}

	.submit {
		position: fixed;
		width: 90%;
		left: 5%;
		bottom: 1%;
		background: linear-gradient(90deg, #6CB0F2 0%, #3C75F2 100%);
		box-shadow: 0px 4px 15px 2px #B2CBEA;
		border-radius: 100rpx;
		text-align: center;
		color: #fff;
		font-size: 40rpx;
		line-height: 100rpx;
		z-index: 100000;

	}




	.immediate-wrap {
		min-height: 80vh;

		.h5-wrap {
			// width: ;
			background: #fff;
			height: 500rpx;
			padding: 28rpx 32rpx;
			border-radius: 16rpx;
		}

		.immediate-wrap-card {

			.immediate-wrap-card-bot {
				padding-top: 24rpx;
				text-align: center;
				justify-content: space-between;

				.immediate-wrap-card-bot-msg {
					line-height: 50rpx;

					// width: 30%;
					.immediate-wrap-card-bot-msg-tit {
						font-size: 24rpx;
						color: #868686;
						font-weight: 500;
					}

					.immediate-wrap-card-bot-msg-titcolor {
						font-size: 48rpx;
						color: $mian-color;
						font-weight: bold;
					}

					.immediate-wrap-card-bot-msg-titcolor1 {
						font-size: 42rpx;
						color: $mian-color;
						font-weight: bold;
					}
				}
			}

			.immediate-wrap-card-center1 {
				.tag {
					background: #FFF2DD;
					border-radius: 4rpx;
					font-size: 20rpx;
					padding: 6rpx 20rpx;
					margin-right: 40rpx;
					color: #FF6936;
				}
			}

			.immediate-wrap-card-center {

				padding: 30rpx 0;
				font-size: 28rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #444;
				justify-content: space-between;
				border-bottom: 2rpx solid rgba(0, 0, 0, 0.06);
				border-top: 2rpx solid rgba(0, 0, 0, 0.06);

				view {
					// justify-content: space-around;
				}
			}

			.immediate-wrap-card-ntop {
				padding-bottom: 18rpx;
				justify-content: space-between;

				.immediate-wrap-card-ntop-left {
					line-height: 40rpx;

					.immediate-wrap-card-ntop-left-l {
						font-size: 28rpx;
						color: #333;

						font-size: 600;
					}

					.immediate-wrap-card-ntop-left-r {
						font-size: 22rpx;
						color: #666666;
						// margin-bottom: 10rpx;
					}
				}
			}

			.immediate-wrap-card-top {
				align-items: center;

				image {
					width: 86rpx;
					height: 86rpx;
					margin-right: 14rpx;
					border-radius: 12rpx;
				}
			}

			position: relative;
			flex-direction: column;
			border-radius: 30rpx;
			color: #444;
			padding: 28rpx 32rpx;
			justify-content: space-between;
			background: #fff;
			font-weight: 500;
			font-size: 28rpx;
		}

		.immediate-wrap-head {
			font-size: 34rpx;
			color: #B0E1FF;
			// margin-bottom: 20rpx;
			padding-left: 20px;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 20rpx;
				// vertical-align: middle;
			}
		}



		padding:0rpx 40rpx;
		margin: 0 auto;

	}

	.immediate-wrap-head {
		font-size: 32rpx;
		color: #B0E1FF;
		margin-bottom: 20rpx;
		padding-left: 50rpx;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 20rpx;
			vertical-align: middle;
		}
	}

	.immediate-wrap-close {

		text-align: right;
		padding: 10rpx 20rpx 0 0;

		image {
			// margin-top: 10rpx;
			width: 24rpx;
			height: 24rpx;
		}
	}

	.des {
		color: #666;
		font-size: 18rpx;
		margin: 8rpx 0 0 0;
		line-height: 40rpx;
		padding: 0 10rpx;

		.des-ts {
			background: linear-gradient(90deg, #9AC0FE 0%, #DEF3FE 100%);
			box-shadow: 0px 0px 8rpx 0px rgba(177, 155, 155, 0.25);
			border-radius: 0px 12rpx 0px 12rpx;
			padding: 6rpx 8rpx;
			color: $mian-color;
			margin: 0 6rpx 6rpx 0;
			font-size: 18rpx;
		}

		// text-align: center;
	}

	.pplc {
		height: 60rpx;
		margin: 0 0 8rpx 0;
		text-align: center;
		padding: 0 32rpx;
		// margin: 26rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>